<template>
	<view class="u-page">
		<uni-view style=" margin-left: 20rpx; display: flex; flex-direction: row;" >
			<view style="display: flex; flex-direction: row;">
				<u--text color="#000" :bold="true" text="当前等级: " customStyle="margin: 00rpx 5rpx 0px 0rpx"></u--text>
				<u--image  customStyle="margin: 0rpx 5rpx 0px 20rpx" width="60rpx" height="60rpx" :src="getUserLevel(this.level)"></u--image>
			</view>
		</uni-view>




		<u--text color="#999" text="请选择VIP类型" customStyle="margin: 20rpx 5rpx 0px 20rpx"></u--text>
		<!-- 	<u--text text="1.需要开通vip, 才能显示推广海报." customStyle="margin: 10rpx 5rpx 0px 20rpx"></u--text>
		<u--text text="2.不同等级vip, 享受平台不同等级权益." customStyle="margin: 10rpx 5rpx 0px 20rpx"></u--text>
 -->

		<view
			style="display: flex; flex-direction: row; flex-wrap: wrap; margin-left: 20rpx; margin-top: 10rpx; margin-right: 20rpx; margin-bottom: 20rpx;">
			<view class="u-page__tag-item" v-for="(item, index) in indexList" :key="index">
				<u-tag type="error" :text="item.cname" :plain="!item.checked" :name="index" @click="radioClick">
				</u-tag>
			</view>


		</view>

		<view>


			<u-button v-if="0" style="width: 80%; margin-top: 50rpx;" @click="submitClick" class="custom-style"
				type="primary" text="开通"></u-button>

			<u--image width="400rpx" height="400rpx" :src="this.codeUrl" class="custom-style-parent"
				type="primary"></u--image>
				<u--text class="custom-style-parent" size="10" style="margin-top: 10rpx;" color="red" 
				text="支付时请备注昵称或注册手机号" customStyle="margin: 10rpx 5rpx 0px 20rpx"></u--text>
				
		</view>

		<view>
			<u--text text="1、不同等级佣金不同，等级越高佣金越高，享受的权益就越高
					2、开通VIP享受做单资格
					3、开通SVIP享受做单资格和邀请好友加入赚取佣金权益
					4、开通合伙人享受全平台最高佣金和独立后台自主运营权益" customStyle="margin: 10rpx 5rpx 0px 20rpx"></u--text>
			<u--text size="10" style="margin-top: 10rpx;" color="red" text="注:本支付二维码为公司专用二维码，请勿轻易相信他人二维码转账" customStyle="margin: 10rpx 5rpx 0px 20rpx"></u--text>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [{
					cname: "VIP ￥9.9",
					checked: true
				}, {
					cname: "SVIP ￥99",
					checked: false
				}, {
					cname: "合伙人 ￥1999",
					checked: false
				}],
				showCode: false,
				codeUrl:"",
				level:0,
			}
		},
		onShow() {
			// this.showCode = false;
			this.token = uni.getStorageSync('login_token')
			console.log("token", this.token);
			if (this.token !== 'undefined' && this.token != null && this.token !== '') {
				this.$u.api.apiGetUser().then(res => {
					if (res.code == 1) {
						this.level = res.data.userLevel
						this.codeUrl = res.data.comPay
					} else {
						
					}
				})
			}
		},
		onLoad() {},
		methods: {
			getUserLevel(level){
				switch(level){
					case 0:
					return "/static/icon_level0.png";
					case 1:
					return "/static/icon_level1.png";
					case 2:
					return "/static/icon_level2.png";
					case 3:
					return "/static/icon_level3.png";
				}
			},
			radioClick(name) {
				this.indexList.map((item, index) => {
					item.checked = index === name ? true : false
				})
			},
			submitClick() {
				this.showCode = true;
				this.$u.api.apiRecharge().then(res => {
					if (res.code == 1) {
						console.log(res.data)
						uni.$u.route('pages/recharge/recharge_info', {
							image_url: res.data.purl,
						});
					}
				})
			}
		},

	}
</script>

<style>
	.u-page__tag-item {
		margin-right: 20rpx;
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.custom-style-parent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
	}
</style>